<template>
	<!-- 没加入班级 -->
	<el-card class="layout-query" v-if="isJoinClass === false">
	<el-form
	  ref="formRef"
	  style="max-width: 600px"
	  :model="dateForm"
	  label-width="auto"
	  class="demo-ruleForm"
	>
	  <el-form-item
		label="班级编码"
		prop="classCode"
		:rules="[
        { required: true, message: '班级编码不能为空' },
        { type: 'string', message: '班级编码必须为字符串' },
      ]"
	  >
		<el-input
		  v-model="dateForm.classCode"
		  type="text"
		  autocomplete="off"
		/>
	  </el-form-item>
	  <el-form-item>
		<el-button type="primary" @click="submitForm(formRef)">加入班级</el-button>
		<el-button @click="resetForm(formRef)">重置</el-button>
	  </el-form-item>
	</el-form>
	</el-card>

	<el-card v-if="isJoinClass === true">
		<el-space>
			<h1>学生已加入班级</h1>
		</el-space>
		
	</el-card>



	
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import { ElMessageBox, FormInstance } from 'element-plus'
  import { joinClass,isJoin } from '@/api/smstu/class'
  import { ElMessage } from 'element-plus'
  const formRef = ref<FormInstance>()
  
  const dateForm = reactive({
	classCode:''
  })

  const isJoinClass = ref(false)

  onMounted(() => {
	// 判断是否加入班级
	isJoin().then((response: any) => {
		isJoinClass.value = response.data
	})
  })

  const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
	  if (valid) {
		console.log('dateForm', dateForm)
		joinClass(dateForm).then((response: any) => {
			ElMessage.success({
				message: '加入' + response.data + '班级成功',
				duration: 500,
				onClose: () => {
					formEl.resetFields()
				}
			})
		})
		console.log('成功提交')
		isJoinClass.value = true
	  } else {
		console.log('失败提交!')
	  }
	})
  }
  
  const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
  }
  </script>
  